<template>
  <div>
    <div class="main">
      <div class="sutitle">
        <div class="sutitle-name">
          <img src="../../../../static/home/shipin.png" alt="" width="16px" height="10px" />
          <span>最新视频</span>
        </div>
        <span class="more">
          <router-link to='videoclass'>更多</router-link>
          <img src="../../../../static/home/next.png" alt="" width="6px" height="12px" />
        </span>
      </div>
      <!-- video beging -->
      <div class="video-box">
        <div class="video-samll" v-for='(item,index) in videoslist' :key="index" @click="openWeb(item)">
          <img :src="item.cover" alt="" width="100px" height="120px" />
          <div class="text" v-text="item.videoName">奇葩说(2018年4月9日)</div>
        </div>
      </div>
      <!-- <div class="sutitle">
				<div class="sutitle-name">
					<img src="../../../../static/home/yuyin.png" alt="" width="14px" height="18px" />
					<span>最新音频</span>
				</div>

				<span class="more">
					<span>更多</span>
					<img src="../../../../static/home/next.png" alt="" width="6px" height="12px" />
				</span>

			</div>
			<div class="audio" v-for="(item,index) in audioslist" :key="index">
				<div class="audio-img">
					<img class="img-one" src="../../../../static/home/play-audio.png" alt="" width="25px" height="25px" />
				</div>
				<div class="autio-title">
					<p class="subtitle" v-text="item.videoName">早读 | 像故事'投诚'的心理机制</p>
					<p class="autio-time">
						<img src="../../../../static/home/Earphone.png" alt="" width="15px" height="15px" />
					</p>
				</div>
			</div> -->

    </div>
  </div>
</template>

<script>
import api from "./../../../api/api.js";
import { Indicator } from "mint-ui";
export default {
  props: ["navid"],
  data() {
    return {
      videoslist: [],
      audioslist: []
    };
  },
  created() {
    this.datevalue = this.formatDate(new Date().getTime()); //时间
    this.getVideos();
  },
  methods: {
    openWeb(e) {
      console.log(e);
      this.$router.push({
        name: "videocontent",
        params: {
          videodata: e
        }
      });
    },
    getVideos() {
      Indicator.open({
        text: "拼命加载中...",
        spinnerType: "triple-bounce"
      });

      this.$http({
        method: "post",
        url: api.baseURL + "getNewColumResByColumnId",
        params: {
          inParam: {
            sysCode: "FH_PUBOPE",
            time: this.datevalue,
            orgId: "",
            accId: 26,
            terminalType: 1,
            columnId: this.navid,
            resCount: 15
          }
        }
      })
        .then(response => {
          const videosList = response.data.data;
          const videos = [];
          const audios = [];
          for (let item of videosList) {
            if (item.isVideo == 0) {
              audios.push(item);
            } else if (item.isVideo == 1) {
              videos.push(item);
            }
          }
          this.videoslist = videos;
          this.audioslist = audios;

          Indicator.close();
        })
        .catch(error => {
          console.log(error);
          Indicator.close();
        });
    }
  }
};
</script>

<style scoped>
/*轮播*/

.home-swipe {
  width: 100%;
  height: 142px;
  /*background: skyblue;*/
}
/*标题*/

.main .sutitle {
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
}

.main .sutitle .sutitle-name {
  /*background-color: coral;*/
  flex-grow: 10;
  -webkit-flex-grow: 10;
  margin-left: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main .sutitle .sutitle-name > span {
  margin-left: 8px;
  font-size: 16px;
  font-weight: 500;
}

.main .sutitle .more {
  /*background: #e60012;*/
  font-size: 13px;
  color: #b6b6b6;
  flex-grow: 1;
  -webkit-flex-grow: 1;
}

.main .sutitle .more > a {
  color: #a1a1a1;
}
/*主体*/

.video-box {
  width: 100%;
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  /*background: #e60012;*/
  box-sizing: border-box;
  padding: 0 15px;
}

.video-samll {
  width: 28%;
  height: 100%;
  margin-bottom: 15px;
}

.video-samll > img {
  width: 100%;
  height: 100px;
  margin: 0 auto;
  border-radius: 5px;
}
.text {
  width: 100px;
  margin: 0 auto;
  font-size: 14px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
/*--------- audio ------- */

.main .audio {
  width: 95%;
  background-color: #ffffff;
  border: 1px solid #f2f2f2;
  box-shadow: darkgrey 1px 1px 2px;
  border-radius: 8px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}

.main .audio .audio-img {
  width: 50px;
  height: 50px;
  margin: 15px 0 15px 15px;
  background: url(../../../../static/music.png) no-repeat;
  background-size: cover;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
/*------------------audio---------------*/

.main .audio .autio-title {
  margin-left: 20px;
  font-size: 15px;
  color: #252525;
}

.main .audio .autio-title .subtitle {
  margin-bottom: 12px;
}

.main .audio .autio-title .autio-time {
  font-size: 12px;
  color: #252525;
  display: flex;
  align-items: center;
}

.main .audio .autio-time span {
  margin-left: 14px;
}

.main .audio .autio-time .color {
  color: #e60012;
}
</style>